<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit" />
  <meta name="robots" content="index, follow" />
  <title>KELLY RIGHT ™</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="shortcut icon" href="skin/fonts/favicon.ico"/>
  <link rel="bookmark" href="skin/fonts/favicon.ico"/>
  <link rel="stylesheet" type="text/css" href="skin/css/font-awesome.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/bootstrap.min.css" media="screen" />
  <link rel="stylesheet" href="skin/css/bootstrap-datepicker3.css">
  <link rel="stylesheet" type="text/css" href="skin/css/owl.carousel.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/owl.theme.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/settings.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/style-red.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/tk.css" media="screen" />
  <script type="text/javascript" src="skin/js/jquery.min.js"></script>
  <script type="text/javascript" src="skin/js/jquery.autocomplete.js"></script>
  <script type="text/javascript" src="skin/js/bootstrap.min.js"></script>
  <script src="skin/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="skin/js/template-web.js"></script>
  <script type="text/javascript" src="skin/js/owl.carousel.min.js"></script>
  <!-- 列表 -->
  <script type="text/html" id="thelist">
    {{each list v i}}
    <!-- 渲染的地方 -->
    <div class="blog-article hentry format-image" id="xrlist">
     
      <div class="row list-item" data-id="{{v.mlsId}}">
        <div class="col-xs-12 col-sm-6 lrow">
          <!-- 左 图 -->
          <div class="figure">
            <img class="pic" alt="" src="{{v.photos[0]}}" />
          </div>
        </div>

        <div class="col-xs-12 col-sm-6 rrow">
          <!-- 右 信息 -->
          <div class="entry-summary post-summary">

            <div class="entry-meta post-meta">
              
              <!-- 上 -->
              <ul class="boxes">

                <li class="entry-date mn">${{v.listPrice}}</li>

                <li class="entry-date secli">{{v.address.full}}</li>

                <li class="tags1">
                  <ul class="bx cistate clearfix">
                    <li class="m">{{v.address.city}}</li>
                    <li class="m">{{v.address.state}}</li>
                  </ul>
                </li>

                <li class="byline author1 vcard">
                  <ul class="bx bbs clearfix">
                    {{ if (v.property.bedrooms) }}
                    <li class="m">{{v.property.bedrooms}} bd</li>
                    {{ /if }}

                    {{ if (v.property.bathsFull) }}
                    <li class="m">{{v.property.bathsFull}} ba</li>
                    {{ /if }}

                    {{ if (v.property.area)}}
                    <li class="m">{{v.property.area}} sf</li>
                    {{ /if }}
                  </ul>
                </li>
                 
                <li class="entry-date subtyoes">{{ v.property.subType ? v.property.subType : '' }}</li>

              </ul>
              
              <!-- 下 -->
              <div class="binfo">
                <ul class="bul clearfix">
                  {{ if (v.agent.photo) }}
                    <li class="pictu">
                      <img src="{{v.agent.photo}}" alt="" class="photo">
                    </li>
                  {{ /if }}
          

                  <li class="midder">
                    <p class="m-nm">{{v.agent.firstName}} {{v.agent.lastName}}</p>
                    <p class="m-company">{{v.office.servingName}}</p>
                  </li>

                  <li class="favioute" id="like">
                    {{if (v.isCollect != 1)}}
                    <img src="./skin/images/aixin.png" alt="">
                    {{else if(v.isCollect == 1)}}
                    <img src="./skin/images/aixin_full.png" alt="">
                    {{/if}}

                    <div class="mask" data-item="{{v}}"></div>
                  </li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
    {{/each}}
  </script>

  <!-- 分页 -->
  <script type="text/html" id="pagelist">
    {{if (pageList.length)}}
    <div id="pages">

      <ul class="boxs clearfix">

        <!-- 首页 -->
        {{ if (pageList.length > 1) }}
        <li class="items">
          <a href='javascript:void(0);' class="homePage">
            <img src="./skin/images/zuoshuangjiantou.png" class="pic" alt="">
          </a>
        </li>
        {{/if}}

        <!-- 上1页 -->
        {{ if (pageList.length > 1) }}
        <li class="items">
          <a href='javascript:void(0);' class="larr">
            <img src="./skin/images/zuojiantou.png" class="pic" alt="">
          </a>
        </li>
        {{/if}}

        <!-- 页码 -->
        {{each pageList v i}}
        {{ if (pageList.length <= 4) }}

        {{if (i == 0)}}
        <li class="items tpage active">
          <a href="javascript:void(0);">{{v}}</a>
        </li>
        {{ else if (i > 0) }}

        <li class="items tpage">
          <a href="javascript:void(0);">{{v}}</a>
        </li>
        {{/if}}

        {{ else if (pageList.length > 4) }}
        {{if i < 2}}
        {{ if (i == 0) }}
        <li class="items tpage active">
          <a href="javascript:void(0);">{{v}}</a>
        </li>
        {{ else if (i != 0)}}
        <li class="items tpage">
          <a href="javascript:void(0);">{{v}}</a>
        </li>
        {{ /if }}
        {{/if}}

        {{if i == 2}}
        <li class="items tpage">
          <a href="javascript:void(0);">...</a>
        </li>
        {{/if}}

        {{if i == pageList.length-1}}
        <li class="items tpage">
          <a href="javascript:void(0);">{{i+1}}</a>
        </li>
        {{/if}}

        {{ /if }}

        {{/each}}

        <!-- 下1页 -->
        {{ if (pageList.length > 1) }}
        <li class="items">
          <a href='javascript:void(0);' class="rarr">
            <img src="./skin/images/youjiantou.png" class="pic" alt="">
          </a>
        </li>
        {{/if}}

        <!-- 末页 -->
        {{ if (pageList.length > 1) }}
        <li class="items">
          <a href='javascript:void(0);' class="lastPage">
            <img src="./skin/images/youshuangjiantou.png" class="pic" alt="">
          </a>
        </li>
        {{/if}}

      </ul>



    </div>
    {{/if}}
  </script>

</head>

<body>
  <div id="container" class="sdiList" style="background: #F9FBFC;">
    <!-- 导航栏 -->
    <header class="clearfix" id="header-sec">
      <nav class="navbar navbar-default navbar-fixed-top pbox" role="navigation">

        <div class="container-fluid">

          <!-- 左 logo -->
          <div class="navbar-header">
            <!-- 移动端按钮 -->
            <a class="navbar-toggle collapsed mmenu-btn" href="#mmenu">
              <!-- <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span>  -->
              <img src="./skin/images/mobile-qttab.png" alt="">
            </a>

            <!-- pc -->
            <a class="navbar-brand hidden-xs hidden-sm hiddenMobEle" href="javascript:;">
              <img src="./skin/images/logo.png" alt="" class="logo" />
            </a>

            <!-- 移动 -->
            <a class="navbar-brand hidden-md hidden-lg hiddenPccEle" href="javascript:;">
              <img src="./skin/images/log-logo.png" alt="" class="logo" />
            </a>

          </div>

          <!-- tab -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-left" id="navigation1">
              <li class="Lev1">
                <a href="./index.html" class='menu1 active'>Homes for Sale </a>
              </li>

              <li class="Lev1">
                <a href="./aboutCharlotte.html" class='menu1'>About Charlotte</a>
              </li>

              <li class="Lev1">
                <a href="./contactUs.html" class='menu1'>Contact Us</a>
              </li>

              <!-- <li class="Lev1">
                    <a href="./openHouses.html" class="menu1">Open Houses</a>
                  </li> -->

              <!-- <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">New Developments</a>
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Buildings
                    </a>
    
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Find an Agent
                    </a>
    
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Blog
                    </a>
                  </li> -->
            </ul>

            <ul class="nav navbar-nav navbar-right" id="navigation2">

              <li class="Lev1">
                <a href="./sign-up.html" class="menu1 giwid firsta">SIGN UP</a>
              </li>

              <li class="Lev1">
                <a href="javascript:void(0);" class="menu1 giwid activeLogin active">LOG IN</a>
              </li>

              <li class="afterLogin" style="display: none">
                <a class="ele-a" href="#">
                  <!-- 注册时输入的用户名 -->
                  <span class="atext">username</span>
                  <div class="arr-down">
                    <img src="./skin/images/jiantouxia.png" alt="">
                  </div>
                </a>

                <!-- 用户相关 -->
                <ul class="aboutUser">
                  <li class="item">
                    <a href="./account-details.html" class="in">
                      <span class="">Account Details</span>
                    </a>
                  </li>

                  <li class="item" id="userFavourite">
                    <a href="./collection.html" class="in">
                      <span class="">Favorites</span>
                      <span class="favNum">0</span>
                    </a>
                  </li>

                  <li class="item">
                    <p class="signOut">Sign Out</p>
                  </li>
                </ul>

              </li>

            </ul>

          </div>

        </div>

      </nav>
    </header>

    <!-- sign in -->
    <div class="signin none">
      <div class="content">
        <!-- 关闭 -->
        <div class="closebtn"></div>

        <!-- logo -->
        <div class="dllogos">
          <div class="photo">
            <img src="./skin/images/log-logo.png" class="thepicture" alt="">
          </div>
        </div>

        <!-- 提示登录 -->
        <!-- <div class="tsinfo">Please login to your account before seeing the information. </div> -->

        <!-- 用户 -->
        <div class="userinfo login-normal" id="userInfo">
          <form action="">
            <!-- 导航 -->
            <div class="row navbares" id="signNav">

              <div class="col-xs-4 col-xs-offset-4 col-sm-2 col-sm-offset-7 up">
                <span>Sign Up</span>
              </div>

              <div class="col-xs-4 col-sm-2 log active">
                <span>Log In</span>
              </div>

            </div>

            <!-- sign up -->
            <div class="row usersignup">
              <!-- <div class="row free">
                  Create a FREE account to save searches and track your favourite homes. Already have an account? Click
                  the Log In tab.
                </div> -->

              <!-- 提示 -->
              <div class="row upalert" id="upginTips">You have signed up successfully, please log in to account.</div>

              <div class="row name">
                <div class="title">Name</div>
                <input type="text" placeholder="" name="" id="input_name1">
                <div class="ts">cannot be blank</div>
              </div>

              <div class="row email">
                <div class="title">Email</div>
                <input type="email" placeholder="" name="" id="input_email1">
                <div class="ts">please enter the correct email</div>
                <div class="exist">account already exists</div>
              </div>

              <div class="row password">
                <div class="title">Phone Number <span class="usedfor">(Used for Password)</span></div>
                <input type="text" placeholder="" name="" id="input_password1">
                <div class="ts">cannot be blank</div>
              </div>

              <!-- <div class="row confirm">
                  <div class="title">Confirm Password</div>
                  <input type="password" placeholder="" name="" id="input_confirm1">
                  <div class="ts">does not match password</div>
                </div> -->

              <!-- 确定 -->
              <div class="row upsubmit">
                <p class="tj active">Sign Up</p>
              </div>

              <div class="row confirm2">
                <!-- <input type="checkbox" name="" value="0" id=""> -->
                <div class="pictur active"></div>
                Get emailed when we find more properties that suit your tastes! We'll notify you daily of new listings
                &
                price changes.
              </div>

              <div class="row bottomTiS">
                By clicking continue or sign up, you agree to our linked <span class="hs">Terms of
                  Use</span> and <span class="hs">Privacy Policy</span>
              </div>
            </div>

            <!-- log in -->
            <div class="row usersignin">
              <!-- <div class="row tit">
                  <p>
                    Don't have an account? Click on the Sign Up tab.
                  </p>
                </div> -->

              <!-- 提示 -->
              <div class="row alert" id="loginTips">Invalid email or password.</div>

              <div class="row email">
                <div class="title">Email</div>
                <input type="email" name="" placeholder="" id="input_email">
                <div class="ts">Please enter the correct email</div>
              </div>

              <div class="row password">
                <div class="title">Phone Number <span class="usedfor">(Used for Password)</span></div>
                <input type="text" name="" placeholder="" id="input_password">
                <div class="ts">cannot be blank</div>
              </div>

              <div class="row loginsubmits">
                <p class="tj active">Log In</p>
              </div>

              <!-- 是否保持状态 忘记密码 -->
              <div class="row combine">
                <!-- 保持状态 -->
                <div class="col-xs-12 col-sm-6 rad">
                  <!-- <input type="checkbox" value="0" name="agree" id="check"> -->
                  <div class="pictur active"></div>
                  Stay logged in
                </div>

                <div class="col-xs-12 col-sm-6 access">
                  <p>
                    <a href="javascript: void(0);" id="forgetword">Can't access your account?</a>
                  </p>
                </div>

              </div>


            </div>

          </form>

        </div>

        <!-- 忘记密码 -->
        <div class="row findpassword login-find" style="display: none;">
          <div class="row tit">
            <p>
              Enter the email address you registered with and your password will be sent to you.
            </p>
          </div>

          <!-- 提示 -->
          <div class="row alert" id="findpaTips">Invalid email.</div>

          <div class="row email" id="emaFi">
            <div class="title">Email</div>
            <input type="email" name="" placeholder="" id="sendEmail">
            <div class="ts">Please enter the correct email.</div>
          </div>

          <div class="row send" id="sendPass">
            <p class="tj active">Send Password</p>
          </div>

          <div class="row back">
            <p>
              <a href="javascript: void(0);">Back to log in page</a>
            </p>
          </div>

        </div>

      </div>
    </div>

    <!-- 内容 -->
    <div class="page-container mainpage saleMain" id="innerpage-wrap">
      <div class="container">

        <div class="row">

          <!-- 左 列表 -->
          <div class="main col-xs-12 col-md-8 inner-left" role="main">

            <!-- 展示 -->
            <article class="blog-wrap" id="listbox"></article>
            <!-- 无数据 -->
            <div class="nolist" id="noData1">no data</div>

            <!-- 分页 -->
            <div class="pagination-wrap" id="pageing"></div>
          </div>

          <!-- 右 侧边 -->
          <div class="sidebar col-xs-12 col-md-4 inner-right" role="complementary" id="listright">
            <div class="widget side-news">
              <!-- 客户 -->
              <div class="applyes">
                <!-- 人员 -->
                <div class="title row">
                  <div class="col-xs-4 lpic">
                    <img src="./skin/images/customer.jpg" class="ig" alt=""/>
                  </div>
                  <div class="col-xs-8 rinfo">
                    <!-- <p class="fz">Salesperson</p> -->
                    <p class="link">Charlotte Wolverton, Broker</p>
                    <!-- <p class="">www.charlottewolverton.com,</p> -->
                    <p>ASP, CNHS, CRS, GRI, PSA, RCC</p>
                    <p>Kelly Right Real Estate</p>
                    <p class="link link1" id="view-agentPhone">M: <a class="tells" href="tel: 509-747-SOLD">509-747-SOLD</a> (7653)</p>
                  </div>
                </div>

                <!-- write -->
                <div class="write" id="sendConsults">
                  <form action="">
                    <div class="item" id="selectDate">
                      <div class="cox-xs-12 commoDates">

                        <input data-provide="datepicker" id="f-date" class="in" placeholder="Preferred Date">
                        <div class="ts">cannot be blank</div>

                      </div>
                    </div>

                    <div class="item" id="myNameS">
                      <div class="cox-xs-12">
                        <input type="text" id="f-name" value="" class="in" placeholder="Name*" />
                        <div class="ts">cannot be blank</div>
                      </div>
                    </div>

                    <div class="item" id="myEmailS">
                      <div class="cox-xs-12">
                        <input type="text" id="f-email" value="" class="in" placeholder="Email*" />
                        <div class="ts">cannot be blank</div>
                      </div>
                    </div>

                    <div class="item" id="myPhoneS">
                      <div class="cox-xs-12">
                        <input type="text" id="f-phone" class="in" placeholder="Phone Number" />
                        <div class="ts">cannot be blank</div>
                      </div>
                    </div>

                    <div class="item rad">
                      <div class="cox-xs-12 isrobottbox">
                        <input type="checkbox" name="" id="bot" class="isrobott">
                        <label class="lab" for="bot">I am not a robot</label>
                      </div>
                    </div>

                    <div class="item submit" id="subSend">
                      <div class="cox-xs-12">
                        <input type="button" value="Submit Viewing Request" class="in" />
                      </div>
                    </div>

                  </form>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>
    </div>

    <!-- 免责 -->
    <div class="disclaimer">
      <div class="media">
        <div class="media-body">
          Listings made available courtesy of the Spokane Association of REALTORS®MLS. Copyright 2019 of the Spokane
          Association of REALTORS®MLS. All rights reserved.
          <br />
          IDX Data is provided exclusively for consumers' personal, non-commercial use, it may not be used for any
          purpose other than to identify prospective properties consumers may be interested in purchasing, data is
          deemed reliable but is not guaranteed accurate by the Spokane Association of REALTORS®MLS.
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="commonfoot">
      <div class="container  hidden-xs hidden-sm">

        <div class="row">

          <div class="col-md-4 col-lg-4  foot-contact rightbox">
            <div class="f-contact ltxt">
              <p> <a href="javascript:void(0);">© 2019 Real Estate Website by DotCom Agents</a></p>
              <p> <a href="javascript:void(0);">All rights reserved. Privacy and Terms</a></p>
            </div>
          </div>

          <div class="col-md-4 col-lg-4 foot-contact">
            <div class="f-contact">
              <ul class="box clearfix">
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom1.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom2.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom3.png" alt="" class="pic">
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-md-4 col-lg-4 foot-contact">
            <div class="f-contact rtxt">
              <p> <a href="./aboutCharlotte.html">ABOUT US</a></p>
              <p> <a href="./contactUs.html">CONTACT US</a></p>
            </div>
          </div>

        </div>

      </div>

      <div class="container hidden-md  hidden-lg">

        <div class="row">

          <div class="col-xs-12 col-sm-12 foot-contact">
            <div class="f-contact one">
              <ul class="about clearfix">
                <li><a href="./aboutCharlotte.html">ABOUT US</a></li>
                <li><a href="./contactUs.html">CONTACT US</a></li>
              </ul>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 foot-contact">
            <div class="f-contact two">
              <ul class="box clearfix">
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom1.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom2.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom3.png" alt="" class="pic">
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12  foot-contact">
            <div class="f-contact three">
              <p> <a href="javascript:void(0);">© 2019 Real Estate Website by DotCom Agents</a></p>
              <p> <a href="javascript:void(0);">All rights reserved. Privacy and Terms</a></p>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 返回顶部 -->
    <div class="commongoback" id="toTop">
      <div class="icon">
        <img src="./skin/images/up.png" />
      </div>
      top
    </div>

    <!-- 加载中 -->
    <div class="load">
      <div class="ing">
        <img src="./skin/images/jiazaizhong.gif" class="photo" alt="">
      </div>
    </div>

    <!-- 提示: 通用 -->
    <div class="commonTips">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">The submission of the view request was successful.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

    <!-- 提示: 登录成功 -->
    <div class="success-logIn">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">Logged in successfully.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

    <!-- 提示: 退出成功 -->
    <div class="success-signOut">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">Signed out successfully.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

    <!-- 提示: 到邮箱找回密码 -->
    <div class="findmailbox">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">You will receive an email with instructions about how to reset your password in a few
        minutes.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

  </div>
  <script type="text/javascript" src="skin/js/jquery.migrate.js"></script>
  <!--<script type="text/javascript" src="skin/js/jquery.bxslider.min.js"></script>-->
  <script type="text/javascript" src="skin/js/jquery.imagesloaded.min.js"></script>
  <!-- <script type="text/javascript" src="skin/js/retina-1.1.0.min.js"></script> -->
  <script type="text/javascript" src="skin/js/jquery.themepunch.tools.min.js"></script>
  <script type="text/javascript" src="skin/js/jquery.themepunch.revolution.min.js"></script>
  <script type="text/javascript" src="skin/js/base64.min.js"></script>
  <script type="text/javascript" src="skin/js/base.js"></script>
  <script type="text/javascript" src="skin/js/axios.min.js"></script>
  <script type="text/javascript" src="skin/js/script.js"></script>

  <!-- 移动端导航 -->
  <nav id="mmenu" class="noDis">
    <div class="mmDiv">

      <!-- 关闭 -->
      <div class="closefixed closemenu">
        <img src="./skin/images/close_pic.png" alt="" style="width: 20px; height: 20px;">
      </div>

      <!-- sign log -->
      <div class="MMhead">
        <ul class="users clearfix">
          <!-- 登录前 -->
          <li class="before before1">
            <a href="./sign-up.html" class="noblock logins">Sign Up</a>
          </li>

          <li class="before">
            <a href="javascript:;" class="noblock activeLogin">Log In</a>
          </li>

          <!-- 登录后 -->
          <!-- Account Details -->
          <li class="afters afters1">
            <a href="./account-details.html" class="item account">
              <img src="./skin/images/log-ren.png" class="pic" alt="">
            </a>
          </li>

          <!-- Favourites -->
          <li class="afters">
            <a href="./collection.html" class="item account">
              <img src="./skin/images/log-aixin.png" class="pic" alt="">
              <span class="num" id="faNum">0</span>
            </a>
          </li>

        </ul>

      </div>


      <!-- nav -->
      <ul class="mobnavbar">
        <li class="box">
          <a href="./index.html">Homes for Sale</a>
        </li>

        <li class="box">
          <a href="./aboutCharlotte.html">About Charlotte</a>
        </li>

        <li class="box">
          <a href="./contactUs.html">Contact Us</a>
        </li>

        <!-- <li class="box">
            <a href="./openHouses.html" class="m-menu1">Open Houses</a>
          </li> -->

        <!-- <li class="box">
            <a href="javascript:;" class="m-menu1">New Developments</a>
          </li>
  
          <li class="box">
            <a href="" class="m-menu1">Buildings</a>
          </li>
  
          <li class="box">
            <a href="" class="m-menu1">Find an Agent</a>
          </li>
          
          <li class="box">
            <a href="" class="m-menu1">Find an Agent</a>
          </li>
  
          <li class="box">
            <a href="javascript:;" class="m-menu1">Blog</a>
          </li> -->
      </ul>

      <!-- sign out 登录后出现 -->
      <div class="footout">
        <a class="" href="javascript:;">Sign Out</a>
      </div>

    </div>
  </nav>

  <link type="text/css" rel="stylesheet" href="skin/css/jquery.mmenu.all.css" />
  <script type="text/javascript" src="skin/js/jquery.mmenu.all.min.js"></script>
  <script type="text/javascript">
    $(function ($) {
      var baseUrl = localStorage.getItem('baseUrl');
      var currPages = 1;
    
      // 列表
      var salesList = [];
      var showList = [];
      var totalPages = 0;
      var totalNum = 0;

      // 1.2 字符串进行 htmlEncode编码
      function htmlEncode(html) {
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
        var output = temp.innerHTML;
        temp = null;
        return output;
      }

      // 1.3 money
      function formatNum(str) {
        var str = typeof str == 'string' ? str : str + '';
        var newStr = "";
        var count = 0;
        // 当数字是整数
        if (str.indexOf(".") == -1) {
          for (var i = str.length - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
              newStr = str.charAt(i) + "," + newStr;
            } else {
              newStr = str.charAt(i) + newStr;
            }
            count++;
          }
          str = newStr; //自动补小数点后两位  + ".00"
          return str;
        }
        // 当数字带有小数
        else {
          for (var i = str.indexOf(".") - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
              newStr = str.charAt(i) + "," + newStr;
            } else {
              newStr = str.charAt(i) + newStr; //逐个字符相接起来
            }
            count++;
          }
          str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
          return str;
        }
      }

      // 1.4 获取参数
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      }

      // 1.5 获取参数
      var sdiId = getUrlParam('sdiId');

      // 1.6 请求
      function getList(params, ispage, isChangeCurr) {

        // top
        $('body,html').animate({
          scrollTop: 0
        }, 0)

        console.log('----- 获取列表传参 -----', params);
        
        axios.post(baseUrl + `/mclient/srts/sdi/${sdiId}`, params, {
            headers: {
              'token': localStorage.getItem('token')
            }
          })

          .then(function (res) {

            if (res.data.code == 0 && res.data.msg == "success") {
              console.log('-----获取不动产列表成功-----', res);

              // 初始化顶部搜索框
              $('#pagesinthe .sr').val('');
              $('#pagesinthe #sale-searchbtn').removeClass('active');

              $('#listbox').html('');
              showList = [];

              var list = res.data.results;

              // 处理
              if (list && list.length) {
                list.map((item, index, arr) => {
                  if (item.listPrice) {
                    item.listPrice = formatNum(item.listPrice);
                  }
                })
              }

              salesList = list; // 存储
              firstData = [];
              if (list && list.length) {
                for (var i = 0; i < 10; i++) {
                  if (list[i]) {
                    showList.push(list[i]);
                  }

                }

              }

              // 渲染
              var html = template('thelist', {
                list: showList
              });
              $('#listbox').html(html);

              // 无数据
              if (!list.length) {
                $('#noData1').show();
                $('#innerpage-wrap #thesort').hide();
              } else {
                $('#noData1').hide();
                $('#innerpage-wrap #thesort').show();
              }

              // 总页数 -- 返回
              var pagelength = Math.ceil(res.data.resultsNum / 10);
              totalPages = +pagelength; // 总页数
              totalNum = res.data.resultsNum; // 总数量

              // 分页
              if (ispage) {
                var pLists = [];
                for (var i = 0; i < pagelength; i++) {
                  pLists.push(i + 1);
                }

                var html6 = template('pagelist', {
                  pageList: pLists
                });
                $('#pageing').html(html6);
              }

              // 当前页选中
              if (isChangeCurr) {
                $('#pageing .tpage').each(function (index, ele) {
                  $(this).removeClass('active');
                  if ($(this).find('a').text() == currPages) {
                    $(this).addClass('active');
                  }
                })
              }


            } else {
              console.log('-----报错-----', res.data.msg);
            }

          })

          .catch(function (error) {
            console.log('-----获取不动产列表失败-----', error);
          });

      }
      

      // 2 从详情页返回
      var isFromDetail = sessionStorage.getItem('fromList');
      if (isFromDetail) {
        sessionStorage.removeItem('fromList');
        var dqy = sessionStorage.getItem('currentPage');
        currPages = +dqy;

        console.log('-----从详情页回来-----', currPages);


        var params35 = {
          'limit': '10',
          'offset': (currPages - 1) * 10 + '',
        };

        getList(params35, 1, 1);


      } else {
        var pm = {
          limit: 10,
          offset: 0
        }
        getList(pm, 1, 1);
        
      }

      // 3 点击每项
      $('#listbox').on('click', '.list-item', function (e) {

        sessionStorage.setItem('currentPage', currPages);
        var id = $(this).data().id;
        window.location.href = `./saleDetail.html?id=${id}`;
      })

    
      // 4 分页
      // 4.1 当前所在页
      $('#pageing').on('click', '.tpage', function () {
        var tx = $(this).find('a').text();
        if (tx != '...') {
          // active
          $(this).addClass('active').siblings('.tpage').removeClass('active');
          currPages = +tx;

          var params11 = {
            'limit': '10',
            'offset': (currPages - 1) * 10 + ''
          };

          getList(params11);

        }
      })

      // 4.2 点击--上一页
      $('#pageing').on('click', '.larr', function () {
        // 1 数字
        var current = +currPages;
        var reduce = 1;
        if (current <= 1) {
          reduce = 1;
          return;
        } else {
          reduce = current - 1;
        }

        currPages = reduce;

        // 1.1 当前显示数字
        $('#pageing .tpage').each(function (index, ele) {
          $(this).removeClass('active');

          if ($(this).find('a').text() == reduce) {
            $(this).addClass('active');
          }

        })

        // 显示
        var params = {
          'limit': '10',
          'offset': (currPages - 1) * 10 + '',
        };

        getList(params);

      })

      // 4.3 点击 -- 下一页
      $('#pageing').on('click', '.rarr', function () {
        // 1 数字
        var current = +currPages;
        var list = salesList;
        var add = 1;
        if (current >= totalPages) {
          add = totalPages;
          return;

        } else {
          add = current + 1;
        }

        currPages = add;

        // 1.1 当前显示数字
        $('#pageing .tpage').each(function (index, ele) {
          $(this).removeClass('active');
          if ($(this).find('a').text() == add) {
            $(this).addClass('active');
          }
        })

        // 1.2 显示
        var params = {
          'limit': '10',
          'offset': (currPages - 1) * 10 + '',
        };

        getList(params);

      })

      // 4.4 点击 -- 首页
      $('#pageing').on('click', '.homePage', function () {
        // 1 数字
        var current = 1;
        currPages = 1;

        // 1.1 当前显示数字
        $('#pageing .tpage').each(function (index, ele) {
          $(this).removeClass('active');

          if ($(this).find('a').text() == current) {
            $(this).addClass('active');
          }

        })

        // 显示
        var params = {
          'limit': '10',
          'offset': '0',
        };

        getList(params);

      })

      // 4.5 点击 -- 末页
      $('#pageing').on('click', '.lastPage', function () {

        // 1 数字
        var current = +totalPages;
        currPages = +totalPages;

        // 1.1 当前显示数字
        $('#pageing .tpage').each(function (index, ele) {
          $(this).removeClass('active');

          if ($(this).find('a').text() == current) {
            $(this).addClass('active');
          }

        })

        // 显示
        var params = {
          'limit': '10',
          'offset': (currPages - 1) * 10 + '',
        };

        getList(params);

      })


      // 5 点击收藏
      $('#listbox').on('click', '.mask', function (e) {
        e.stopPropagation();

        // 前提--登录
        if (localStorage.getItem('token')) {

          var item1 = $(this).data().item;

          // 请求
          var params5 = {
            'mlsId': item1.mlsId + '',
            'propertiesData': item1,
            'actionDo': item1.isCollect == 1 ? -1 : 1 // -1 取消
          };
          console.log('----- 收藏传参 -----', params5);

          axios.post(baseUrl + '/mclient/member/collectProperties', params5, {
              headers: {
                'token': localStorage.getItem('token')
              }
            })

            .then(function (res) {

              if (res.data.code == 0 && res.data.msg == "success") {
                console.log('-----收藏成功-----', res);

                // api中无字段判断
                // 1.1 刷新列表
                var showList1 = showList;
                showList1.map((item, index, arr) => {
                  if (item1.mlsId == item.mlsId) {
                    item.isCollect = (item.isCollect == 1 ? -1 : 1);
                  }
                })

                showList = showList1;

                // 1.2 渲染
                var html = template('thelist', {
                  list: showList1
                });
                $('#listbox').html(html);

                // 2 获取收藏数
                getLikeList();

              } else {
                console.log('-----收藏不成功-----', res);
              }

            })

            .catch(function (res) {
              console.log('-----请求收藏接口失败-----', res);
            });

        } else {

          // 未登录--提示
          $('.signin').show();
          $('.signin .content').slideDown();
        }


      })

      // 关闭      
      $('.signin').on('click', '.closebtn', function () {

        $('.signin .content').slideUp();

        setTimeout(() => {
          $('.signin').hide();
        }, 100)


      })

      // 6 获取收藏数
      var likeListResult = [];

      function getLikeList() {

        axios.post(baseUrl + '/mclient/member/collectList', {}, {
            headers: {
              'token': localStorage.getItem('token')
            }
          })

          .then(function (res) {

            if (res.data.code == 0 && res.data.msg == "success") {
              console.log('-----获取收藏列表成功-----', res);
              likeListResult = res.data.results;

              if (likeListResult) {
                $('.aboutUser #userFavourite .favNum').text(likeListResult.length);
                $('.users .afters #faNum').text(likeListResult.length); //移动端
              }

            } else {
              console.log('-----获取收藏列表不成功-----', res);
            }

          })

          .catch(function (res) {
            console.log('-----请求收藏列表接口失败-----', res);
          });

      };

      // 7 点击--发送代理咨询
      $('#listright').on('click', '#sendConsults #subSend', function () {
        // 日期
        var sdate = $('#sendConsults #f-date').val();
        // 姓名
        var sname = $('#sendConsults #f-name').val();
        // 邮件
        var semail = $('#sendConsults #f-email').val();
        // 电话
        var sphone = $('#sendConsults #f-phone').val();

        if (!sname) {
          $('#sendConsults #myNameS .ts').show();
          return;
        }

        if (!semail) {
          $('#sendConsults #myEmailS .ts').text('cannot be blank');
          $('#sendConsults #myEmailS .ts').show();
          return;
        } else {

          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (!reg.test(semail)) {
            $('#sendConsults #myEmailS .ts').text('Please enter the correct email.');
            $('#sendConsults #myEmailS .ts').show();
            return;
          }

        }

        if (!sphone) {
          $('#sendConsults #myPhoneS .ts').show();
          return;
        }


        // 请求
        var params3 = {
          'preferredDate': sdate,
          'custName': sname,
          'email': semail,
          'phone': sphone,
        }

        axios.post(baseUrl + '/mclient/member/consultation', params3, {
            headers: {
              'token': localStorage.getItem('token')
            }
          })

          .then(function (res) {

            // 1 登录成功
            if (res.data.code == 0 && res.data.msg == 'success') {

              console.log('-----发送咨询成功-----', res);

              // 提示
              $('.commonTips .txt').text('The submission of the view request was successful.');
              $('.commonTips').show();

              setTimeout(() => {
                $('.commonTips').hide();
              }, 7000)


            } else {

              console.log('-----发送咨询失败-----', res);

              $('.commonTips .txt').text('Failed to submit a view request.');
              $('.commonTips').show();

              setTimeout(() => {
                $('.commonTips').hide();
              }, 7000)

            }

          })

          .catch(function (res) {
            console.log('-----请求发送咨询失败-----', res);
          });

      })

      // 7.1 data-focus
      $('#listright').on('focus', '#f-date', function () {
        $('#sendConsults #selectDate .ts').hide();
      })

      // 7.2 name-focus
      $('#listright').on('focus', '#f-name', function () {
        $('#sendConsults #myNameS .ts').hide();
      })

      // 7.3 email-focus
      $('#listright').on('focus', '#f-email', function () {
        $('#sendConsults #myEmailS .ts').hide();
      })

      // 7.4 phone-focus
      $('#listright').on('focus', '#f-phone', function () {
        $('#sendConsults #myPhoneS .ts').hide();
      })

      // 8 点击日期
      $('#listright').on('click', '.commoDates', function () {
        $('#listright #f-date').focus();
      })


    });
  </script>
</body>

</html>